<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form" :inline="true" :model="form" label-width="130px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="会员姓名">
                            <el-input v-model="form.realname"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="会员手机号">
                            <el-input v-model="form.telephone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="证件号码">
                            <el-input v-model="form.identity"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="证件类型">
                            <el-select placeholder="请选择" v-model="form.identityType">
                                <el-option
                                v-for="item in cardOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审核状态">
                            <el-select placeholder="请选择" v-model="form.reviewStatus">
                                <el-option
                                v-for="item in reviewOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="realname"
                    label="会员姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="telephone"
                    label="会员手机号"
                >
                </el-table-column>
                <el-table-column
                    label="证件类型"
                >
                    <template slot-scope="scope"> 
                        {{scope.row.identityType | cardType}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="identity"
                    label="证件号码"
                >
                </el-table-column>
                <el-table-column
                    label="证件正面"
                >
                    <template slot-scope="scope"> 
                        <img style="height:60px" :src="scope.row.identityImg" alt="">
                    </template>
                </el-table-column>
                <el-table-column
                    label="证件反面"
                >
                    <template slot-scope="scope"> 
                        <img style="height:60px" :src="scope.row.identityBackImg" alt="">
                    </template>
                </el-table-column>
                <el-table-column
                    label="审核状态"
                >
                    <template slot-scope="scope"> 
                        {{scope.row.reviewStatus | RS}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="reviewRemark"
                    label="审核驳回标注"
                >
                </el-table-column>
                <el-table-column
                    prop="createdBy"
                    label="提交时间"
                >
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                >
                <template slot-scope="scope">
                    <el-button v-if="!scope.row.reviewStatus" type="text" @click="auditFn(scope.row.userId)" size="small">审核</el-button>
                    <span v-else style="font-size:12px">已审核</span>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listForm.pageNum"
                    :page-sizes="page_sizes"
                    :page-size="listForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totals">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { certificationList,review,modifyUserServerStatus } from '@/api/certificationList'

export default {
    name:"auditHMT",
    data(){
        return{
            tableLoading:true,
            form:{
                realName:"",
                username:"",
                identity:"",
                identityType:"",
                reviewStatus:null,
                pageNum:1,
                pageSize:10,
            },
            tableData: [],
            page_sizes:[10,30,50,100],
            page_totals:60,
            listForm:{
                identityType:"1,2,3",
                pageNum:1,
                pageSize:10,
            },
            cardOptions:[{
                    value: '1',
                    label: '港澳通行证'
                }, {
                    value: '2',
                    label: '台湾身份证'
                },  {
                    value: '3',
                    label: '护照'
                }
            ],
            reviewOptions:[{
                    value: 1,
                    label: '审核通过'
                }, {
                    value: 2,
                    label: '审核驳回'
                }
            ],
        }
    },
    filters:{
        cardType: function(e){
            return window.helper.cardType(String(e))
        },
        // 0为未审核 1为审核通过  2为审核驳回
        RS:function(e){
            switch(e){
                case 0 :
                    return "未审核"
                case 1 :
                    return "审核通过"
                case 2 :
                    return "审核驳回"
                default: 
                    return "暂无"
            }
        }
    },
    mounted(){
        this.getList(this.listForm)
    },
    methods:{
        //成功状态弹窗
        succStatus(txt){
            this.$message({
                message: txt+'成功',
                type: 'success'
            });
        },
        //失败状态弹窗
        errorStatus(txt){
            this.$message.error(txt+'失败');
        },
        //查询
        searchFn(){
            this.getList(this.form)
        },
        //列表数据获取
        getList(e){
            this.tableLoading = true
            let datas = e
            certificationList(datas).then(res => {
                console.log(res)
                if(!res.data.code){
                    // console.log(res)
                    this.tableData = res.data.data.list
                    this.page_totals = res.data.data.count
                }else{
                    this.$message.error("数据接口访问失败");
                }
                this.tableLoading = false
            })
            .catch(error =>{
                this.$message.error(error);
            })
        },
        //改变页面条数
        handleSizeChange(val) {
            this.form.pageSize = val
            this.getList(this.form)
        },
        //选择页数
        handleCurrentChange(val) {
            this.form.pageNum = val
            this.getList(this.form)
        },
        // 审核
        auditFn(e){
            this.$confirm('是否审核通过？', '提示', {
                confirmButtonText: '审核通过',
                cancelButtonText: '驳回',
                type: 'warning'
            }).then(() => {
                let datas = {
                        userId:e,
                        reviewStatus:"1",
                        reviewRemark:""
                    }
                console.log(JSON.stringify(datas))
                review(datas).then(res =>{
                    if(!res.data.code){
                        this.succStatus("审核")
                        this.getList(this.listForm)
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
                let datas = {
                        userId:e,
                        reviewStatus:"2",
                        reviewRemark:""
                    }
                review(datas).then(res =>{
                    if(!res.data.code){
                        this.$message({
                            type: 'info',
                            message: '已驳回'
                        });
                        this.getList(this.listForm)
                    }else{
                        this.$message.error(res.data.msg);
                    }
                })    
            });
        }
    }
}
</script>
<style scoped>
/* 分页 */
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
</style>
